<script lang="ts" setup>
import { CloseOne } from '@icon-park/vue-next'
import { VideoState, VideoType } from '@renderer/types'
import { computed } from 'vue'
import useVideo from '@renderer/componsables/useVideo'

const { removeFile } = useVideo()
const props = defineProps<{ video: VideoType }>()
const processValue = computed(() => {
  return props.video.process + '%'
})
const bgColor = computed(() => {
  return {
    [VideoState.COMPRESS]: '#f9f871',
    [VideoState.ERROR]: '#ff6f91',
    [VideoState.FINISH]: '#4ffbdf'
  }[props.video.state]
})
</script>

<template>
  <section class="video">
    <div class="flex justify-between items-center z-10 gap-1">
      <div class="progress">{{ Math.round(video.process) }}</div>
      <div class="title">{{ video.name }}</div>
    </div>
    <div class="icon">
      <close-one theme="outline" size="16" @click="removeFile(video.path)" />
    </div>
  </section>
</template>

<style lang="scss" scoped>
.video {
  @apply bg-white px-3 py-[8px] rounded-lg mb-3 mx-3 text-xs text-slate-600
  flex justify-between items-center relative;
  &::before {
    content: '';
    @apply absolute top-0 bottom-0 right-0 left-0 rounded-lg;
    width: v-bind(processValue);
    background-color: v-bind(bgColor);
  }
  .progress {
    @apply w-[20px] h-[20px] bg-white rounded-full text-[10px] flex justify-center items-center text-slate-800 opacity-90;
  }
  .title {
    @apply truncate;
  }
  .icon {
    @apply text-slate-500 opacity-50 hover:scale-150 duration-300 hover:text-yellow-500 hover:opacity-100 cursor-pointer;
  }
}
</style>
